<template>
    <div id="category">
        <!-- 搜索框 -->
        <van-search v-model="seachData" placeholder="商品搜索 共239款好物" input-align="center"/>
        <van-tree-select 
            :items="items" 
            :main-active-index.sync="activeIndex" 
            @click-nav="changeRight" 
            height='calc(100vh - 104px)'>
            <template slot="content">  
                <div class="IMGbanner">
                    <img width="100%" :src="imgIMG" alt="">
                </div>
                <van-grid :column-num="3">
                    <van-grid-item v-for="(item,index) in subCategoryList" 
                    :key="'category'+index" 
                    :icon="item.wap_banner_url" 
                    :text="item.name" :to="'/categorylist/'+item.id" />
                </van-grid>
            </template>
        </van-tree-select>
        
        <tab-btn></tab-btn>
    </div>
</template>
<script>
import tabBtn from '../components/tabBtn.vue'
import axios from 'axios'
import api from '../assets/config/api.js'
export default {
    data:function(){
        return{
             seachData:"",
            //  items: [{ text: '分组 1' }, { text: '分组 2' }],
             activeIndex:-1,
             subCategoryList:[],
             data:{},
             imgIMG:"",
        }
    },
    computed:{
        items:function(){
            if(this.data.categoryList==undefined){
                return []
            }else{
                let arr=[]
                this.data.categoryList.forEach((item,index)=>{
                    item.text=item.name
                    arr.push(item);
                });
                return arr;
            }
        },  
       
    },
    watch:{
        activeIndex:async function(){
            if(this.items.length!==0){
                let id=this.items[this.activeIndex].id 
                console.log(id);
                this.imgIMG=this.items[this.activeIndex].img_url;
                let res=await axios.get(api.CatalogCurrent,{params:{id}});
                this.subCategoryList=res.data.data.currentCategory.subCategoryList
            }else{
                this.subCategoryList=[]
            }
        }
    },
    methods:{
         changeRight:function(index){
            // console.log(index);
            this.activeIndex=index;
        }
    },
   async created(){
        let res= await axios.get(api.CatalogList);
        let data=res.data;
        this.data=data.data;
        this.subCategoryList=this.data.currentCategory.subCategoryList;
         console.log(this.data);
        this.imgIMG=this.data.currentCategory.img_url;
       
    },
    components:{
        tabBtn
    }
}
</script>
<style lang="less" >
    #category{
        .IMGbanner{
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
        }
    }
</style>>